<script>
import { getProList } from '@/api/pro'
import ExportJsonExcel from 'js-export-excel'
export default {
    name: 'export',
    data() {
        return {
            proList: [],
            currentPage: 1,
            pageSize: 5
        }
    },
    methods: {
        exportClick() {
            // 文件导出按钮的点击事件
            /*
                文件导出通常会使用两种方法
                1、通过一个 a 标签配合文件地址进行导出
                <a href="https://unpkg.com/vue@3/dist/vue.global.js">下载文件</a>

                2、通过数据的收集和定义，来导出文件内容
                
            */

            // 创建导出的 option 对象
            const option = {}
            // 导出文件的名称 
            option.fileName = '小吴导出的文件'

            option.datas = [
                {
                    // 配置需要导出的原数据
                    sheetData: this.proList,
                    // 配置导出的工作表名称
                    sheetName: '小吴导出的工作表',
                    // 需要导出的字段名称
                    sheetFilter: ['proname', 'proid', 'originprice', 'category'],
                    // 配置工作表字段的表头标题名称
                    sheetHeader: ['商品名称', '商品 id', '商品价格', '商品分类'],
                    // 配置列宽度
                    columnWidths: [10, 20, 30, 40],
                }, {
                    sheetData: this.proList,
                    sheetName: '图片工作表',
                    sheetFilter: ['brand', 'img1'],
                    sheetHeader: ['商品品牌', '商品图片'],
                }, {
                    sheetData: [{
                        name: '张三',
                        age: 18
                    }, {
                        name: '李四',
                        age: 20
                    }, {
                        name: '王五',
                        age: 21
                    }, {
                        name: '赵六',
                        age: 19
                    }, {
                        name: '田七',
                        age: 16
                    }],
                    sheetName: '用户信息',
                    sheetFilter: ['name', 'age'],
                    sheetHeader: ['姓名', '年龄'],
                }
            ]

            // 通过配置的 option 对象创建一个 excel 表格
            var toExcel = new ExportJsonExcel(option); //new
            // 将创建的 excel 表格保存在本地
            toExcel.saveExcel(); //保存

        }
    },
    mounted() {
        getProList().then(res => {
            // console.log(res.data);
            this.proList = res.data
        })
    },
    computed: {
        tabData() {
            return this.proList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage - 1) * this.pageSize + this.pageSize)
        }
    }
}
</script>
<template>
    <h2 class="title">
        文件导出
        <!-- <a href="https://unpkg.com/vue@3/dist/vue.global.js">下载文件</a> -->
        <el-button @click="exportClick">导出文件</el-button>

    </h2>

    <el-table :data="tabData">
        <el-table-column label="序号" type="index">
            <template #default="scope">
                <div>
                    {{ (currentPage - 1) * pageSize + 1 + scope.$index }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="图片">
            <template #default="scope">
                <el-image style="width: 80px;height: 80px;" :src="scope.row.img1"> </el-image>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="proname"> </el-table-column>
        <el-table-column label="商品分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="originprice"> </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="proList.length" v-model:current-page="currentPage"
        :page-size="pageSize" />
</template>
<style scoped lang="scss">
.title {
    margin: 5px 0;
}
</style>